<template>

  <div class="app-container">

    <el-form ref="postForm" :model="postForm" label-position="left" :rules="rules" label-width="100px">

      <h3>基本信息</h3>

      <el-card>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户名称" prop="name">
              <el-input v-model="postForm.name" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="客户类型">
              <dic-list-select v-model="postForm.cusType" dic-code="cus_type" style="width: 100%" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="客户来源">
              <dic-list-select v-model="postForm.source" dic-code="source" style="width: 100%" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="客户级别">
              <dic-list-select v-model="postForm.level" dic-code="level" style="width: 100%" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="客户行业">
              <dic-list-select v-model="postForm.industry" dic-code="industry" style="width: 100%" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="主营产品">
              <el-input v-model="postForm.product" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="备注信息">
              <el-input v-model="postForm.remark" type="textarea" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="公司地址">
              <el-input v-model="postForm.address" />
            </el-form-item>
          </el-col>

        </el-row>

      </el-card>

      <h3>联系人</h3>

      <el-card>
        <el-row :gutter="20">

          <el-col :span="12">
            <el-form-item label="姓名" prop="contacts.name">
              <el-input v-model="postForm.contacts.name" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="职位">
              <dic-list-select v-model="postForm.contacts.position" dic-code="position" style="width: 100%" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="手机号码" prop="contacts.mobile">
              <el-input v-model="postForm.contacts.mobile" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="邮箱">
              <el-input v-model="postForm.contacts.email" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="微信号码">
              <el-input v-model="postForm.contacts.wechat" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="postForm.contacts.remark" />
            </el-form-item>
          </el-col>

        </el-row>

      </el-card>

    </el-form>

    <div style="margin-top: 20px">
      <el-button @click="navBack">返回</el-button>
      <el-button type="primary" @click="handleSave">保存</el-button>
    </div>

  </div>

</template>

<script>
import permission from '@/directive/permission'
import DicListSelect from '@/components/DicListSelect'
import { apiSaveCustomer } from '@/api/customer/customer'

export default {
  directives: { permission },
  components: { DicListSelect },
  props: {

  },
  data() {
    return {
      flag: '',
      rules: {
        name: [
          { required: true, message: '客户名称不能为空！' }
        ],
        concat: [
          { required: true, message: '联系人姓名不能为空！' }
        ],

        'contacts.name': [
          { required: true, message: '联系人名称不能为空！' }
        ],
        'contacts.mobile': [
          { required: true, message: '联系人手机不能为空！' }
        ]
      },

      postForm: {
        contacts: {

        }
      }
    }
  },

  created() {
    this.flag = this.$route.params.flag
  },

  methods: {

    // 返回
    navBack() {
      if (this.flag == 'keep') {
        this.$router.push('/admin/customer/keep')
      } else {
        this.$router.push('/admin/customer/sea')
      }
    },

    handleSave() {
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }
        apiSaveCustomer(this.postForm).then(() => {
          this.$message({
            type: 'success',
            message: '客户保存成功!'
          })

          this.navBack()
        })
      })
    }
  }
}
</script>
